<template>
	<view class="contain">
		<view class="w-full flex flex-col justify-center items-center">
			<!-- 二维码 -->
			<view><canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas></view>
			<view class="w-[30%] flex justify-center items-center my-2"><u-button type="primary" text="刷新" shape="circle" @click="refreshQrcode"></u-button></view>
			<view class="w-[50%] flex justify-center items-center my-2"><u-button type="primary" text="保存二维码到相册" shape="circle" @click="saveQRCode"></u-button></view>
		</view>
		<view class="flex justify-between inputBox">
			<view class="w-[49.5%] flex justify-start items-center">
				<view class="w-[240rpx] text-center">id</view>
				<view>
					{{para.data.id}}
				</view>
			</view>
			<view class="w-[49.5%] flex justify-start items-center">
				<view class="w-[240rpx] text-center">角色</view>
				<view class="ml-1">
					<u-button type="primary" :text="chineseRole" @click="roleSelect" :customStyle="{'width':'200rpx'}"></u-button>
				</view>
			</view>
		</view>
		<view class="flex justify-between inputBox">
			<view class="w-[49.5%] flex justify-start items-center" v-if="para.data.role==='personal'">
				<view class="w-[240rpx] text-center">名称:</view>
				<view @click="getNew">
					<u--input placeholder="请输入内容" border="surround" disabled v-model="para.data.personalName"></u--input>
				</view>
			</view>
			<view class="w-[49.5%] flex justify-start items-center" v-if="para.data.role==='merchant'">
				<view class="w-[240rpx] text-center">商家名称</view>
				<view>
					<u--input placeholder="请输入内容" border="surround" disabled v-model="para.data.merchantName"></u--input>
				</view>
			</view>
			<view class="w-[49.5%] flex justify-start items-center" v-if="para.data.role==='hot'">
				<view class="w-[240rpx] text-center">网红:</view>
				<view>
					<u--input placeholder="请输入内容" border="surround" disabled v-model="para.data.hotName"></u--input>
				</view>
			</view>
			<view class="w-[49.5%] flex justify-start items-center" v-if="para.data.role==='personal'">
				<view class="w-[240rpx] text-center">抽奖次数</view>
				<view>
					<u--input placeholder="请输入内容" border="surround" v-model="para.data.lotteryLimit"></u--input>
				</view>
			</view>
		</view>
		<view class="flex justify-between inputBox" v-if="para.data.role==='personal'">
			<view class="w-[49.5%] flex justify-start items-center">
				<view class="w-[240rpx] text-center">奖金池</view>
				<view>
					<u--input placeholder="请输入内容" border="surround" v-model="para.data.moneyPool"></u--input>
				</view>
			</view>
			<view class="w-[49.5%] flex justify-start items-center">
				<view class="w-[240rpx] text-center">利润分配</view>
				<view>
					<u--input placeholder="请输入内容" border="surround" v-model="para.data.PoolRate"></u--input>
				</view>
			</view>
		</view>
		<view class="flex justify-between inputBox">
			<view class="w-[49.5%] flex justify-start items-center" v-if="para.data.role==='personal'">
				<view class="w-[240rpx] text-center">个人1%</view>
				<view>
					<u--input placeholder="请输入内容" border="surround" v-model="para.data.personalRate"></u--input>
				</view>
			</view>
			<view class="w-[49.5%] flex justify-start items-center" v-if="para.data.role!='hot'">
				<view class="w-[240rpx] text-center">商家3%</view>
				<view>
					<u--input placeholder="请输入内容" border="surround" v-model="para.data.merchantRate"></u--input>
				</view>
			</view>
		</view>
		<view class="flex justify-start inputBox">
			<view class="w-[49.5%] flex justify-start items-center" v-if="para.data.role==='personal'">
				<view class="w-[240rpx] text-center">个人钱包</view>
				<view>
					<u--input placeholder="请输入内容" border="surround" v-model="para.data.account"></u--input>
				</view>
			</view>
			<view class="w-[49.5%] flex justify-start items-center" v-if="para.data.role!='hot'">
				<view class="w-[240rpx] text-center">一次开发:</view>
				<view>
					<view><u--input placeholder="请输入内容" border="surround" v-model="para.data.allRate"></u--input></view>
				</view>
			</view>
		</view>

		<block v-if="para.data.role==='personal'">
			<view class="flex justify-start inputBox">
				<view class="w-[100%] flex justify-start items-center">
					<view class="w-[50%] text-center">免单金额设置</view>
					<view class="w-full flex justify-between items-center">
						<view class="flex justify-start items-center"><u--input type="number" placeholder="请输入内容" border="surround" v-model="para.data.maxFree"></u--input>元以下</view>
					</view>
				</view>
			</view>
			<view class="flex justify-start inputBox">
				<view class="w-[100%] flex justify-start items-center">
					<view class="w-[50%] text-center">免单概率</view>
					<view class="w-full flex justify-between items-center">
						<view class="flex justify-start items-center"><u--input type="number" placeholder="请输入内容" border="surround" v-model="para.data.freeRate"></u--input>(值越大概率越高)</view>
					</view>
				</view>
			</view>
				<view class="flex justify-start inputBox">
					<view class="w-[100%] flex justify-start items-center">
						<view class="w-[50%] text-center">100元内折扣</view>
						<view class="w-full flex justify-between items-center">
							<view><u--input placeholder="请输入内容" border="surround" disabled v-model="para.data.Alow"></u--input></view>
							<view>至</view>
							<view><u--input placeholder="请输入内容" border="surround" disabled v-model="para.data.Ahight"></u--input></view>
						</view>
					</view>
				</view>
				<view class="flex justify-start inputBox">
					<view class="w-[100%] flex justify-start items-center">
						<view class="w-[50%] text-center">200元内折扣</view>
						<view class="w-full flex justify-between items-center">
							<view><u--input placeholder="请输入内容" border="surround" disabled v-model="para.data.Blow"></u--input></view>
							<view>至</view>
							<view><u--input placeholder="请输入内容" border="surround" disabled v-model="para.data.Bhight"></u--input></view>
						</view>
					</view>
				</view>
				<view class="flex justify-start inputBox">
					<view class="w-[100%] flex justify-start items-center">
						<view class="w-[50%] text-center">300元内折扣</view>
						<view class="w-full flex justify-between items-center">
							<view><u--input placeholder="请输入内容" border="surround" disabled v-model="para.data.Blow"></u--input></view>
							<view>至</view>
							<view><u--input placeholder="请输入内容" border="surround" disabled v-model="para.data.Bhight"></u--input></view>
						</view>
					</view>
				</view>
		</block>
		<view class="flex justify-start inputBox">
			<view class="w-[100%] flex justify-start items-center">
				<view class="w-[30%] text-center">有效期:</view>
				<view class="w-full text-left" @click.stop="showDate">
					<u--input placeholder="请输入内容" border="surround" disabled v-model="para.data.expiredDate"></u--input>
				</view>
			</view>
		</view>
		
		<view class="w-full text-center mt-5">
			<u-button type="primary" text="保存当前角色" @click="setOk" :customStyle="{'width':'98%'}"></u-button>
		</view>
		<view class="w-full text-center mt-5">
			<u-button type="error" text="扫码" @click="goScan" :customStyle="{'width':'98%'}"></u-button>
		</view>
		
		<!-- 角色选择 -->
		<u-action-sheet :actions="roleList" title="角色选择" :show="roleShow" :closeOnClickOverlay="true" @select="selectItem" @close="closed"></u-action-sheet>
		<!-- 日期选择 -->
		<u-datetime-picker :show="dateShow" v-model="dateValue" mode="date" :closeOnClickOverlay="true" @confirm="dateConfirm" @close="dateClose" @cancel="dateClose"></u-datetime-picker>
		
	</view> <!-- contain End -->
		
</template>


<script setup lang='ts'>
	
	
	import { ref,reactive } from 'vue'
	import {  onLoad,onShow,onReady } from '@dcloudio/uni-app'
	import { userStore } from '@/stores/userStore'
	import { GenerateOrderNo,Date_E } from '@/common/date.js'
	import UQRCode from 'uqrcodejs';
	
	const store = userStore()
	let roleShow=ref(false);
	let roleList=reactive([
		{name:'普通用户'},
		{name: '商家'},
		{name: '网红'}
	]);

	
	let dateShow=ref(false);
	let dateValue=ref('');
	let chineseRole=ref("普通用户"); //pu
	const refreshQrcode=()=>{
		uni.showLoading({
			title:"正在生成二维码"
		})
		qrCode();
		save();
		uni.hideLoading();
	}
	
	const getNew=()=>{
		para.data.id=GenerateOrderNo();
		para.data.personalName="用户"+getRandomLetter();
		qrCode();
		save();
	}
	const getRandomLetter=()=>{
	    const letters = 'abcdefghijklmnopqrstuvwxyz';
	    return letters[Math.floor(Math.random() * letters.length)].toUpperCase()+new Date().getSeconds();
	}
	console.log(getRandomLetter());
	const showDate=()=>{
		dateShow.value=true;
	}
	const dateConfirm=(e:any)=>{
		console.log(e);
		para.data.expiredDate=Date_E(e.value); //时间戳转换
		dateClose();
	};
	const dateClose=()=>{
		dateShow.value=false;
	}
	const roleSelect=()=>{
		roleShow.value=true;
	}
	const closed=()=>{
		roleShow.value=false;
	}
	const selectItem=(e:any)=>{
		console.log(e);
		chineseRole.value=e.name;
		para.data.id=GenerateOrderNo();
		para.data.role=chinese2english(e.name);
		uni.showLoading({
			title:"正在生成二维码"
		})
		qrCode();
		setTimeout(()=>{
			uni.hideLoading();
			save();
		},1000);	
	}
	let para=reactive({data:{
		action:'', //行为 (p2p 3%) (p2m 4% --个人未开发过直接扫商家) (pp2m 1% -- 个人推荐3% 再到商家只占1%) (h2m 1%)
		id:'', //8折
		sid:'', //上级id
		superiors:"", //上级名称-商家
		superiors_pid:"", //上级名称-个人-id
		superiors_personal:"", //上级名称-个人
		superiors_hot:"", //上级-网红
		superiors_hot_Recommand_merchantId:"", //网红推荐的商家id
		superiors_hot_Recommand_merchantName:"", //网红推荐的商家名称
		superiors_hot_Recommand_personalId:"", //网红推荐的商家id
		superiors_hot_Recommand_personalName:"", //网红推荐的商家名称
		role:'personal', //默认是普通用户(个人)
		hotName:'LiMing',
		personalName:'Tonny',
		merchantName:'KFC',
		account:'100', //虚拟账号。站内现金账号
		lotteryLimit:10, //抽奖次数限制
		moneyPool:1000, //奖金池
		maxFree:100, //500元内免单
		freeRate:0.3, //数字越大免单几率越高
		PoolRate:0.3, //奖金池利润3成
		merchantRate:0.03, //3% 商家返现
		personalRate:0.01,  //1% 个人返现
		allRate:0.04, //4% 商家一次性开发返佣，别人不能再开发
		isBeenDeveloped:false, //是否被别人开发了，不用显示input组件
		//100元 -- 折扣浮动率
		Alow:8,
		Ahight:9.3,
		//200元 -- 折扣浮动率
		Blow:8.5,
		Bhight:9.3,		
		//300元 -- 折扣浮动率
		Clow:9,
		Chight:9.75,	
		bindType:null,
		expiredDate:"2025-12-31" //有效期
	}});
	const save=()=>{
		uni.setStorageSync("setting",para.data);
	}
	const setOk=()=>{
		save();
		uni.$tools.Toast("设置成功");
	}
	const goScan=()=>{
		uni.$tools.GoUrl("/pages/shop_scanQrcode/shop_scanQrcode");
	}
	
	onLoad(()=>{
		//生成id并保存
		para.data.id=GenerateOrderNo();
		//save();
	});
	const chinese2english=(input:string)=>{;
		if(input==="普通用户") return "personal";
		if(input==="商家") return "merchant";
		if(input==="网红") return "hot";
		return input;
	}
	const qrCode=()=>{
		uni.hideLoading();
		uni.showLoading({
			title:"正在生成二维码"
		})
	  // 获取uQRCode实例
	  var qr = new UQRCode();
	  // 设置二维码内容
	  //qr.data = "https://uqrcode.cn/doc";
	  // let obj={
		 //  id:para.data.id,
		 //  role:chinese2english(para.data.role),
		 //  expired:para.data.expiredDate //二维码过期时间
	  // }
	  qr.data =JSON.stringify(para.data);
	  // 设置二维码大小，必须与canvas设置的宽高一致
	  qr.size = 200;
	  // 调用制作二维码方法
	  qr.make();
	  // 获取canvas上下文
	  var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
	  // 设置uQRCode实例的canvas上下文
	  qr.canvasContext = canvasContext;
	  // 调用绘制方法将二维码图案绘制到canvas上
	  qr.drawCanvas();
	  uni.hideLoading();
	}
	const saveQRCode=async ()=>{
		const tempFilePath = await convertCanvasToTempFilePath();
			  if (tempFilePath) {
				uni.saveImageToPhotosAlbum({
				  filePath: tempFilePath,
				  success: () => {
					uni.showToast({
					  title: '保存成功'
					});
				  },
				  fail: err => {
					uni.showToast({
					  title: '保存失败',
					  icon: 'none'
					});
					console.error(err);
				  }
				});
		}		
	}
	// 将canvas转换为临时文件路径
	const convertCanvasToTempFilePath=()=>{
	      return new Promise((resolve, reject) => {
	        const ctx = uni.createCanvasContext('qrcode');
	        uni.canvasToTempFilePath({
	          canvasId: 'qrcode',
	          success: res => {
	            resolve(res.tempFilePath);
	          },
	          fail: err => {
	            reject(err);
	          }
	        }, this);
	      });
	 }
	onReady(()=>{
		qrCode();
	});
</script>
<style>
	.inputBox /deep/ input{
		width:150rpx;
	}
	page{
		padding-bottom:200rpx;
	}
</style>
<style lang='scss' scoped>
	@import "shop_set.scss";
</style>